<template>
  <el-row :gutter="20">
    <el-col :span="6">
      <chart-card>
        <template #chart-title>今日销售额</template>
        <template #chart-number>{{homeDate.salesToday}}</template>
        <template #charts>
          <div style="font-size:12px;font-weight:700">
          <span>日同比:{{homeDate.salesGrowthLastDay}}</span><svg t="1664422343597" class="icon" viewBox="0 0 1427 1024"
            version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5140" width="12" height="12">
            <path
              d="M275.821156 67.001091h161.919302C455.607415 67.001091 469.007634 81.517993 469.007634 98.268266v902.281352H244.55398V98.268266c0-16.750273 14.516903-31.267176 31.267176-31.267175z"
              fill="#d81e06" p-id="5141"></path>
            <path
              d="M492.458015 1024H222.220284V98.268266c0-30.150491 24.567067-53.600872 53.600872-53.600872h161.919302C467.890949 44.667394 491.34133 69.23446 491.34133 98.268266v925.731734z m-225.570338-44.667394h180.902945V98.268266c0-5.583424-4.466739-8.933479-8.933479-8.933479H275.821156c-5.583424 0-8.933479 4.466739-8.933479 8.933479v881.06434z"
              fill="#d81e06" p-id="5142"></path>
            <path
              d="M635.393675 292.571429h170.852781c15.633588 0 26.800436 12.283533 26.800436 27.917121v681.177753H607.476554v-681.177753c0-15.633588 12.283533-27.917121 27.917121-27.917121z"
              fill="#d81e06" p-id="5143"></path>
            <path
              d="M855.380589 1022.883315H585.142857v-703.51145c0-27.917121 22.333697-50.250818 50.250818-50.250818h170.852781c27.917121 0 50.250818 22.333697 50.250818 50.250818v703.51145z m-225.570338-44.667394h180.902944v-658.844056c0-2.23337-2.23337-5.583424-5.583424-5.583424H635.393675c-2.23337 0-5.583424 2.23337-5.583424 5.583424v658.844056z"
              fill="#d81e06" p-id="5144"></path>
            <path
              d="M989.38277 513.675027h179.786259c12.283533 0 22.333697 10.050164 22.333697 22.333697v465.657579H967.049073V536.008724c0-12.283533 10.050164-22.333697 22.333697-22.333697z"
              fill="#d81e06" p-id="5145"></path>
            <path
              d="M1213.836423 1024H944.715376V536.008724c0-24.567067 20.100327-44.667394 44.667394-44.667394h179.786259c24.567067 0 44.667394 20.100327 44.667394 44.667394v487.991276z m-224.453653-44.667394h179.786259V536.008724H988.266085l1.116685 443.323882z"
              fill="#d81e06" p-id="5146"></path>
            <path
              d="M1404.789531 1024H22.333697c-12.283533 0-22.333697-10.050164-22.333697-22.333697s10.050164-22.333697 22.333697-22.333697h1382.455834c12.283533 0 22.333697 10.050164 22.333697 22.333697s-10.050164 22.333697-22.333697 22.333697zM1155.768811 303.738277c-5.583424 0-11.166848-2.23337-15.633587-6.700109L879.947655 37.967285c-8.933479-8.933479-8.933479-22.333697 0-31.267176 8.933479-8.933479 22.333697-8.933479 31.267176 0l259.070883 259.070883c8.933479 8.933479 8.933479 22.333697 0 31.267176-3.350055 4.466739-8.933479 6.700109-14.516903 6.700109z"
              fill="#d81e06" p-id="5147"></path>
            <path
              d="M1182.569248 314.905125H1011.716467c-12.283533 0-22.333697-10.050164-22.333697-22.333696s10.050164-22.333697 22.333697-22.333697h126.185387V144.052345c0-12.283533 10.050164-22.333697 22.333697-22.333697s22.333697 10.050164 22.333697 22.333697v170.85278z"
              fill="#d81e06" p-id="5148"></path>
            <path
              d="M1055.267176 1024c-12.283533 0-22.333697-10.050164-22.333697-22.333697V589.609597c0-12.283533 10.050164-22.333697 22.333697-22.333697s22.333697 10.050164 22.333696 22.333697v412.056706c0 12.283533-10.050164 22.333697-22.333696 22.333697z"
              fill="#d81e06" p-id="5149"></path>
            <path
              d="M697.928026 1024c-12.283533 0-22.333697-10.050164-22.333697-22.333697v-636.51036c0-12.283533 10.050164-22.333697 22.333697-22.333697s22.333697 10.050164 22.333697 22.333697v635.393675c0 13.400218-10.050164 23.450382-22.333697 23.450382z"
              fill="#d81e06" p-id="5150"></path>
            <path
              d="M340.588877 1024c-12.283533 0-22.333697-10.050164-22.333697-22.333697V144.052345c0-12.283533 10.050164-22.333697 22.333697-22.333697s22.333697 10.050164 22.333697 22.333697v857.613958c0 12.283533-10.050164 22.333697-22.333697 22.333697z"
              fill="#d81e06" p-id="5151"></path>
          </svg></div>
          <div style="font-size:12px;font-weight:700">
          <span>月同比:{{homeDate.salesGrowthLastMonth}}</span><svg t="1664422426095" class="icon" viewBox="0 0 1024 1024"
            version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6594" width="12" height="12">
            <path
              d="M987.043172 1000.472648H760.73245V95.229759c0-17.925602 14.564551-31.369803 31.369803-31.369803H954.553019c17.925602 0 31.369803 14.564551 31.369803 31.369803l1.12035 905.242889z"
              fill="#1afa29" p-id="6595"></path>
            <path
              d="M1009.450174 1022.87965H738.325447V95.229759c0-14.564551 5.601751-28.008753 15.684902-38.091903 10.083151-10.083151 23.527352-15.684902 38.091904-15.684902H954.553019c30.249453 0 53.776805 24.647702 53.776805 53.776805v927.649891z m-226.310722-44.814004h181.496718V95.229759c0-5.601751-4.4814-8.962801-8.962801-8.962801H793.222603c-3.36105 0-5.601751 1.12035-6.722101 2.240701-1.12035 1.12035-2.2407 3.36105-2.2407 6.7221v882.835887z"
              fill="#1afa29" p-id="6596"></path>
            <path
              d="M621.809036 1001.592998H396.618664v-683.413567c0-15.684902 12.323851-26.888403 28.008753-26.888403H596.040984c15.684902 0 28.008753 12.323851 28.008752 26.888403-2.2407 0-2.2407 683.413567-2.2407 683.413567z"
              fill="#1afa29" p-id="6597"></path>
            <path
              d="M644.216038 1024H374.211662v-705.820569c0-28.008753 22.407002-49.295405 50.415755-49.295405H596.040984c28.008753 0 50.415755 22.407002 50.415754 49.295405v705.820569z m-225.190372-44.814004h181.496718v-661.006565c0-2.2407-2.2407-4.4814-5.601751-4.4814H423.507067c-2.2407 0-5.601751 2.2407-5.601751 4.4814v661.006565z"
              fill="#1afa29" p-id="6598"></path>
            <path
              d="M262.176651 1000.472648H35.865929V534.407002c0-12.323851 10.083151-22.407002 22.407002-22.407002h181.496718c12.323851 0 22.407002 10.083151 22.407002 22.407002v466.065646z"
              fill="#1afa29" p-id="6599"></path>
            <path
              d="M284.583653 1022.87965H13.458927V534.407002c0-24.647702 20.166302-44.814004 44.814004-44.814004h181.496718c24.647702 0 44.814004 20.166302 44.814004 44.814004v488.472648zM58.272931 978.065646h181.496718V534.407002H58.272931v443.658644z"
              fill="#1afa29" p-id="6600"></path>
            <path
              d="M173.668992 1022.87965c-12.323851 0-22.407002-10.083151-22.407002-22.407002V587.063457c0-12.323851 10.083151-22.407002 22.407002-22.407002s22.407002 10.083151 22.407002 22.407002v413.409191c0 13.444201-10.083151 22.407002-22.407002 22.407002zM532.181027 1022.87965c-12.323851 0-22.407002-10.083151-22.407002-22.407002V362.993435c0-12.323851 10.083151-22.407002 22.407002-22.407002s22.407002 10.083151 22.407002 22.407002v637.479213c0 13.444201-10.083151 22.407002-22.407002 22.407002z"
              fill="#1afa29" p-id="6601"></path>
            <path
              d="M890.693062 1022.87965c-12.323851 0-22.407002-10.083151-22.407002-22.407002V140.043764c0-12.323851 10.083151-22.407002 22.407002-22.407003s22.407002 10.083151 22.407002 22.407003v860.428884c0 13.444201-10.083151 22.407002-22.407002 22.407002z"
              fill="#1afa29" p-id="6602"></path>
            <path
              d="M309.231355 182.617068c-12.323851 0-22.407002-10.083151-22.407002-22.407002V44.814004H170.307942c-12.323851 0-22.407002-10.083151-22.407002-22.407002s10.083151-22.407002 22.407002-22.407002h160.210066v160.210066c1.12035 12.323851-8.962801 22.407002-21.286653 22.407002z"
              fill="#1afa29" p-id="6603"></path>
            <path
              d="M35.865929 320.420131c-5.601751 0-11.203501-2.2407-15.684902-6.7221-8.962801-8.962801-8.962801-22.407002 0-31.369803L293.546454 7.842451c8.962801-8.962801 22.407002-8.962801 31.369803 0 8.962801 8.962801 8.962801 22.407002 0 31.369803L51.55083 313.698031c-4.4814 4.4814-10.083151 6.722101-15.684901 6.7221z"
              fill="#1afa29" p-id="6604"></path>
          </svg></div>
        </template>
        <template #chart-footer>昨日销售额¥{{homeDate.salesLastDay}}</template>
      </chart-card>
    </el-col>
    <el-col :span="6">
      <chart-card>
        <template #chart-title>今日订单</template>
        <template #chart-number>{{homeDate.orderToday}}</template>
        <template #charts>
          <ChartLine :data="homeDate.orderTrend"></ChartLine>
        </template>
        <template #chart-footer>昨日订单量¥ {{homeDate.orderLastDay}}</template>
      </chart-card>
    </el-col>
    <el-col :span="6">
      <chart-card>
        <template #chart-title>今日交易用户数</template>
        <template #chart-number>{{homeDate.orderUser}}</template>
        <template #charts>
          <ChartColumnar :data="homeDate.orderUserTrend"></ChartColumnar>
        </template>
        <template #chart-footer>退货率 {{homeDate.returnRate}}</template>
      </chart-card>
    </el-col>
    <el-col :span="6">
      <chart-card>
        <template #chart-title>
          累计用户
        </template>
        <template #chart-number>
          {{homeDate.usersTotal}}
        </template>
        <template #chart-footer>
          <div>
              <span>日同比:{{homeDate.userGrowthLastDay}}%<svg t="1664437877380" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2516" width="12" height="12"><path d="M799.9 96 224.1 96C153.3 96 96 153.3 96 224.1l0 420.3 185.3-185.3c12.5-12.5 32.8-12.5 45.2 0l147.1 147.1 157.7-157.7-32.6-32.6c-11.9-11.9-6.5-32.3 9.8-36.6L751.7 341c16.3-4.4 31.2 10.5 26.8 26.8l-38.4 143.1c-4.4 16.3-24.7 21.7-36.6 9.8l-26.9-26.9L496.2 674.1c-12.5 12.5-32.8 12.5-45.2 0L303.9 527l-198 198c-2.9 2.9-6.3 5-9.9 6.6l0 68.3C96 870.7 153.3 928 224.1 928l575.8 0c70.7 0 128.1-57.3 128.1-128.1L928 224.1C928 153.3 870.7 96 799.9 96z" p-id="2517" fill="#d4237a"></path></svg></span>
              <span>月同比:{{homeDate.userGrowthLastMonth}}%<svg t="1664438021257" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3934" width="12" height="12"><path d="M799.9 96 224.1 96C153.3 96 96 153.3 96 224.1l0 68.3c3.6 1.6 7 3.7 9.9 6.6l198 198L451 349.9c12.5-12.5 32.8-12.5 45.2 0l180.3 180.3 26.9-26.9c11.9-11.9 32.3-6.5 36.6 9.8l38.4 143.1c4.4 16.3-10.5 31.2-26.8 26.8l-143.1-38.4c-16.3-4.4-21.7-24.7-9.8-36.6l32.6-32.6L473.6 417.8 326.5 564.9c-12.5 12.5-32.8 12.5-45.2 0L96 379.6l0 420.3C96 870.7 153.3 928 224.1 928l575.8 0c70.7 0 128.1-57.3 128.1-128.1L928 224.1C928 153.3 870.7 96 799.9 96z" p-id="3935" fill="#1afa29"></path></svg></span>
          </div>
        </template>
        <template #charts>
          <progress-chart></progress-chart>
        </template>
      </chart-card>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
//引入自己封装的卡片组件
import ChartCard from "./ChartCard/index.vue";
import ChartLine from "./ChartLine/index.vue";

//进度条
import ProgressChart from './progressChart/index.vue';

import ChartColumnar from "./ChartColumnar/index.vue";
defineProps(['homeDate'])
</script>

<style scoped>

</style>